<template>
    <view class="goods-container">
        <view @click="handleGoods" class="goods-info u-flex u-p-20" hover-class="none">
            <view class="left u-flex u-flex-1 u-line-1">
                <view class="goods-img">
                    <u-image width="80" height="80" shape="circle" :src="goods.thumbnail" mode=""></u-image>
                </view>
                <view class="u-line-1 u-m-l-20 u-m-r-20">{{ goods.goods_name }}</view>
            </view>
        </view>
        <view class="goods-asks">
            <scroll-view scroll-y="true" style="height: 100%;" :refresher-enabled="false" @scrolltolower="onScrolltolower" v-if="asksList && asksList.length">
                <view class="asks-info" v-for="(ask, askIndex) in asksList" :key="askIndex" @click="handleAskDetail(ask.ask_id)">
                    <view class="u-m-b-20 u-flex u-row-between">
                        <view v-if="ask.anonymous === 'NO'">用户{{ ask.member_name }}的提问：</view>
                        <view v-if="ask.anonymous === 'YES'">匿名用户的提问：</view>
                        <view class="">{{ask.create_time | unixToDate('yyyy-MM-dd')}}</view>
                    </view>
                    <view class="ask-cont u-m-b-20">{{ ask.content }}</view>
                    <view class="ask-reply u-m-b-20" v-if="ask.reply_status === 'YES'">{{ ask.reply }}</view>
                    <view class="ask-reply u-m-b-20" v-if="ask.reply_status === 'NO'">{{ ask.first_reply?ask.first_reply.content:'' }}</view>
                    <view class="u-text-right">
                        <text style="color:#3248F2">查看全部{{ ask.reply_num}}个回答</text>
                        <u-icon class="u-m-l-10" name="arrow-right" color="#ff5000"></u-icon>
                    </view>
                </view>
            </scroll-view>
            <view class="no-asks-info" v-if="!asksList.length">
                <u-empty text="有问题? 问问买过的人吧!"></u-empty>
            </view>
        </view>
        <view class="ask-btns" @click="handleAskBuyer">
            <u-icon class="u-margin-right-5" name="question-circle" size="36"></u-icon>
            <text class="ask-btn">问问买家</text>
        </view>
    </view>
</template>

<script>
    import * as API_Member from '@/api/members.js'
    import * as API_Goods from '@/api/goods.js'

	export default {
		data() {
			return {
                goods_id: '',
                goods: '',
                params: {
                    page_no: 1,
                    page_size: 10
                },
                asksList: [],
                finished: false
			}
		},
        onLoad(options) {
            this.goods_id = options.goods_id
            this.getGoodsDetail()
            this.getGoodsConsultations()
        },
		methods: {
            //问问买家
            handleAskBuyer() {
                this.judgeLogin(() => {
                    this.navigateTo(`/goods-module/goods-ask-problem?goods_id=${this.goods_id}`)
                })
            },
            //商品详情
            handleGoods() {
                this.navigateTo(`/goods-module/goods?goods_id=${this.goods_id}`)
            },
            // 跳转至问题详情页面
            handleAskDetail(ask_id) {
                this.navigateTo(`/mine-module/ask-detail?goods_id=${this.goods_id}&ask_id=${ask_id}`)
            },
            // 加载更多
            onScrolltolower() {
                this.params.page_no += 1
                if(!this.finished) this.getGoodsConsultations()
            },
            // 获取商品详情信息
            getGoodsDetail(){
                API_Goods.getGoods(this.goods_id).then(response => {
                    this.goods = response
                })
            },
            //商品问答列表
            getGoodsConsultations() {
                API_Member.getGoodsConsultations(this.goods_id, this.params).then(response => {
                    const { data } = response
                    if (data && data.length) {
                        this.asksList = this.asksList.concat(data)
                    } else {
                        this.finished = true
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .goods-container {
        height: 100%;
		position: relative;
        .goods-info {
            position: fixed;
            z-index: 99;
            width: 100%;
            background-color: #f3f4f6;
            /deep/ .u-image__image {
                border-radius: 10rpx !important;
            }
        }
        .goods-asks {
            padding-top: 120rpx;
            height: 100%;
            .asks-info {
                margin: 25rpx 0;
                padding: 30rpx;
                border-radius: 25rpx;
                background-color: #FFFFFF;
                .ask-cont {
                    font-weight: 600;
                    font-size: 32rpx;
                    word-break: break-all;
                    &::before {
                        content: '问';
                        display: inline-block;
                        margin: -4rpx 20rpx 0 0;
                        width: 40rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                        border-radius: 50%;
	                    background: linear-gradient(145deg,#ff9000,#ff5000 77%);
                        color: #fff;
                        font-size: 24rpx;
                        vertical-align: middle;
                        text-align: center;
                    }
                }
                .ask-reply {
                    word-break: break-all;
                    &::before {
                        content: '答';
                        display: inline-block;
                        margin: -4rpx 20rpx 0 0;
                        width: 40rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                        border-radius: 50%;
                        background: linear-gradient(to right, #EE8A66 0%, #E46552 100%);
                        color: #fff;
                        font-size: 24rpx;
                        vertical-align: middle;
                        text-align: center;
                    }
                }
                .ask-num {
                    color: #979797;
                }
            }
            .no-asks-info {
                height: 100%;
                padding-top: 200rpx;
                background-color: #FFFFFF;
                /deep/ .u-empty {
                    height: 300rpx;
                }
            }
        }
        .ask-btns {
            position: fixed;
            bottom: 100rpx;
            left: 50%;
            transform: translate(-50%);
            color: #fff;
            padding: 16rpx 60rpx;
            border-radius: 50rpx;
            font-size: 30rpx;
	        background: linear-gradient(145deg,#ff9000,#ff5000 77%);
        }
    }
</style>
